<template>
    <view class="video grid-3 gap-[10rpx]">
        <view class="video-item" v-for="(item, i) in data" :key="i" @click="toVideoDetail(item)">
            <image :src="item.frameUrl || item.videoFrame" mode="aspectFill" />
            <view class="playCount">▶ {{ item.playCount }}</view>
        </view>
    </view>
</template>

<script lang="ts" setup>
const props = defineProps(['data'])

const toVideoDetail = (item: any) => {
    uni.setStorageSync('videoList', [item])
    uni.navigateTo({
        url: `/views/subViews/videoPage/videoDetail/index?bindId=` + item.bindId
    })
}
</script>

<style scoped lang="scss">
.video {
    padding: 20rpx 0;
    .video-item {
        width: 100%;
        height: 312rpx;
        border-radius: 10rpx;
        position: relative;
        overflow: hidden;
        image {
            width: 100%;
            height: 100%;
        }
        .playCount {
            position: absolute;
            padding: 4rpx 8rpx;
            border-radius: 6rpx;
            font-size: 12px;
            bottom: 20rpx;
            left: 20rpx;
            color: #fff;
            background-color: rgba($color: #000000, $alpha: 0.3);
        }
    }
}
</style>
